<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="stylesheet" type="text/css" href="/resources/static/h-ui.admin/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="/resources/static/h-ui/css/H-ui.min.css"/>
    <link rel="stylesheet" type="text/css" href="/resources/static/h-ui.admin/css/H-ui.admin.css"/>
    <link rel="stylesheet" type="text/css" href="/resources/lib/Hui-iconfont/1.0.7/iconfont.css"/>
    <link rel="stylesheet" type="text/css" href="/resources/static/h-ui.admin/css/style.css"/>
    <script type="text/javascript" src="/resources/lib/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="/resources/lib/util.js"></script>
    <style type="text/css">
        a.dt-button.red {
            color: red;
        }

        a.dt-button.orange {
            color: orange;
        }

        a.dt-button.green {
            color: green;
        }

        .text-c {
            text-align: center;
        }

    </style>
    <title></title>
</head>

<body>
<div class="page-container">

    <div class="row">
        <div class="col-sm-10 col-xs-12 mb-5">
            <label for="" class="col-md-2 col-sm-3 col-xs-4 text-r">在线时间（截止）:</label>
            <input type="text" name="timeEnd" id="timeEnd"
                   value="$!{OnlineQo.timeEnd}"
                   onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})"
                   class="input-style col-md-2 col-sm-3"/>

            <label for="" class="col-sm-2 col-xs-12 text-r">时间类型:</label>
            <select name="ras_type" id="dateType" class="input-style col-md-2 col-xs-4">
                <option value="$!{OnlineQo.dateType}">&#45;&#45;请选择（默认天）&#45;&#45;</option>
                <option value="0">按天</option>
                <option value="1">按月</option>
            </select>
        </div>

        <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px"
           href="javascript:location.replace(location.href);" title="刷新"><i class="Hui-iconfont">&#xe68f;</i></a>
        <div class="row text-c">
            <button type="button" class="btn btn-success size-L radius" id="search_button" name="">
                <i class="Hui-iconfont">&#xe665;</i> 开始查询
            </button>
        </div>
    </div>

    <script type="text/javascript" src="/resources/lib/layer/2.1/layer.js"></script>
    <script type="text/javascript" src="/resources/static/h-ui/js/H-ui.js"></script>
    <script type="text/javascript" src="/resources/static/h-ui.admin/js/H-ui.admin.js"></script>
    <script src="/resources/static/h-ui.admin/js/bootstrap-table.min.js"></script>
    <script src="/resources/static/h-ui.admin/js/bootstrap-table-zh-CN.min.js"></script>
    <script type="text/javascript" src="/resources/lib/My97DatePicker/WdatePicker.js"></script>


    <!-- 1.引入 ECharts 文件 -->
    <script src="/statics/plugins/echarts/echarts.js"></script>
    <!-- 2.为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width:100%;height:600px;"></div>
    <!-- 3.创建echarts -->
    <script type="text/javascript">

        $("#search_button").click(function () {
            searchWhere = {
                timeEnd: $("#timeEnd").val(),
                dateType: $("#dateType").val(),
                random: Math.random()
            };

            $.ajax({
                url: "../user/online/search.do",
                type: "post",
                data: searchWhere,
                dataType: "json",
                success: function (result) {

                    var createTimeArray = result.createTimeArray;
                    var numArray = result.numArray;
//                    createTimeArray = ['1','2','3','1','1','1','7','1','9','1','11','12','13','14','15'];
//                    numArray = ['1','2','3','1','1','1','7','1','9','1','11','12','13','14','15'];

                    // 基于准备好的dom，初始化echarts实例
                    var myChart = echarts.init(document.getElementById('main'));
                    // 指定图表的配置项和数据
                    var option = {
                        title: {
                            text: '在线统计'
                        },
                        color: ['#3398DB'],
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                            }
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: [
                            {
                                type: 'category',
                                data: createTimeArray,
                                axisTick: {
                                    alignWithLabel: true
                                }
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value'
                            }
                        ],
                        series: [
                            {
                                name: '当前数量',
                                type: 'bar',
                                barWidth: '40%',
                                data: numArray
                                ,//显示数量
                                itemStyle:{
                                    normal:{
                                        label :{show:true}
                                    }
                                }
                            }
                        ]
                    };
                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);

                },
                error: function (result) {
                    layer.msg("未成功查询", "错误原因如下：" + result, {icon: 2, time: 1000});
                }
            });

        });

        $(document).keydown(function (event) {
            if (event.keyCode == 13) {
                $("#search_button").trigger("click");
            }
        });

        $(document).ready(function () {
            $("#search_button").click();
        });

    </script>

</body>
</html>
